<template>
  <div class="container">
    <header class=" pl13-pt13" style="background: #fff; padding-bottom: 20px;">
      <aside class="pt5 pb5"><span class="f14" style="color: #F54727">公告：</span><span></span></aside>
      <div>
        <swiper class="swiper" autoplay="true" interval="5000" duration="1000" indicator-dots="true" indicator-active-color="#41B962" indicator-color="#fff"
                circular="true" :current="current" @change="swiperChange">
          <block v-for="item in thumb" :key="item.index">
            <swiper-item class="am-slider">
              <img :src="item.thumb" style="width: 100%; height: 100%;"/>
            </swiper-item>
          </block>
        </swiper>
      </div>
      <scroll-view scroll-x="true" class="scroll-view-x" style="padding-top:10px" scroll-with-animation="true" scroll-left='0' @scroll="getleft">
        <!--内容区域-->
        <view>
          <view class="navigator_second" v-for="commonsecont in hotSortFirst" :key= 'commonsecont.index'>
            <i class="icon iconfont" :style="{color:commonsecont.color}"  >{{commonsecont.icontext}}</i>
            <p>{{commonsecont.spantext}}</p>
          </view>
        </view>
        <view>
          <view class="navigator_second mt20" v-for="commonsecont in hotSortSecond" :key= 'commonsecont.index'>
            <i class="icon iconfont" :style="{color:commonsecont.color}"  >{{commonsecont.icontext}}</i>
            <p>{{commonsecont.spantext}}</p>
          </view>
        </view>
      </scroll-view >
      <!--滚动条部分-->
      <view v-if="slideShow" class="slide">
        <view class='slide-bar' >
          <div class="slide-show" :style="{width: slideWidth + 'rpx', marginLeft: slideLeft <= 1 ? 0 : slideLeft + 'rpx'}"></div>
        </view>
      </view>
      <aside class="mt15" @click="goGroupBooking">
        <img class="img" src="./pingtuan.png"/>
        <img class="img-two" src="./other.png"/>
      </aside>
    </header>
    <main>
      <section id="hot-pay" v-if="mallPromotion.promotion_type === 1">
        <header>
          <p>限时秒杀<span>1折爆品，限时抢购</span></p>
          <div v-for="(times, index) in timeData" :key="times.index">
            <div v-for="(time, key) in times.exactTime" :key="time.key">
              <span>{{time.hour}}</span>
              <i class="icon iconfont">&#xe65e;</i>
              <span>{{time.minites}}</span>
              <i class="icon iconfont">&#xe65e;</i>
              <span>{{time.second}}</span>
            </div>
          </div>
        </header>
        <sercherpay :goods-sort="mallPromotionGoods" v-if="mallPromotionGoods.length > 0"></sercherpay>
      </section>
      <recommond-list :goods-sort="topList" v-if="topList.length > 0"></recommond-list>
      <listorts v-for="goods in goodsDatas" :key="goods.index" :goods-sort="goods" v-if="goodsDatas.length > 0"></listorts>
    </main>
  </div>
</template>
<script type="ECMAScript 6">
  import recommondList from '@/pages/index/list-sorts/recommond-list-sorts';
  import listorts from '@/components/list-sorts';
  export default {
    name: 'index',
    components: {
      listorts,
      recommondList
    },
    data () {
      return {
        loadingData: false,
        post: null,
        error: null,
        showData: false,
        loading: false,
        showPrice: false,
        mallPromotion: {},
        mallPromotionGoods: [],
        goodsDatas: {},
        topList: [],
        thumb: '', // 轮播图
        current: 0, // 轮播图当前的图片的id
        slideShow: true, // 分类导航
        navigate_type:'',//分类类型，是否包含二级分类
        slideWidth:'',//滑块宽
        slideLeft:0 ,//滑块位置
        totalLength:'',//当前滚动列表总长
        slideRatio:'',
        hotSortFirst: [
          { color: '#F6926B', icontext: '', spantext: '常用清单' },
          { color: '#3FD67B', icontext: '', spantext: '蔬菜类' },
          { color: '#F0973A', icontext: '', spantext: '肉禽蛋' },
          { color: '#F6926B', icontext: '', spantext: '豆制品' },
          { color: '#FE8852', icontext: '', spantext: '冻货类' },
          { color: '#FE8852', icontext: '', spantext: '调料香料' }
        ],
        hotSortSecond: [
          { color: 'rgb(76, 145, 14)', icontext: '', spantext: '干货类' },
          { color: '#F7A46B', icontext: '', spantext: '一次性用品' },
          { color: '#00E0A8', icontext: '', spantext: '米面粮油' },
          { color: '#FE8852', icontext: '', spantext: '洗涤清洁' },
          { color: '#F5C45D', icontext: '', spantext: '厨房餐具' },
          { color: '#7a8dfe', icontext: '', spantext: '酒水饮料' }
        ],
        // 热门推荐
        hotSearchs: [],
        imgsGroup: [],
        timeData: [{id: 1, time: 0, exactTime: ''}],
        http: this.$store.state.http
      };
    },
    watch: {
      '$route': 'initData'
    },
    methods: {
      //根据分类获取比例
      getRatio(){
        let self = this ;
        if (!self.hotSortFirst || self.hotSortFirst.length <= 5){
          this.slideShow = false;
        }else{
          let _totalLength = self.hotSortFirst.length * 160; //分类列表总长度
          let _ratio = 160 / _totalLength * ( 750 / wx.getSystemInfoSync().windowWidth); //滚动列表长度与滑条长度比例
          let _showLength = 750 / _totalLength * 200; //当前显示红色滑条的长度(保留两位小数)
            this.slideWidth = _showLength;
            this.totalLength = _totalLength;
            this.slideShow = true;
            this.slideRatio = _ratio;
        }
      },
      getleft(e){
        this.slideLeft = e.mp.detail.scrollLeft * this.slideRatio;
      },
      num (n) {
        return n < 10 ? '0' + n : '' + n;
      },
      timeToData (maxtime) {
        let that = this;
        let second = Math.floor(maxtime % 60);
        let minite = Math.floor((maxtime / 60) % 60);
        let hour = Math.floor((maxtime / 3600) % 24);
        second = that.num(second);
        minite = that.num(minite);
        hour = that.num(hour);
        let exactTime = [{second: second, hour: hour, minites: minite}];
        return exactTime;
      },
      getTime () {
        let that = this;
        setInterval(function () {
          if (!that.timeData) {
            return;
          }
          that.timeData.forEach(function (value) {
            let exact = that.timeToData(value.time);
            if (typeof value.exactTime === 'undefined') {
            } else {
              value.exactTime = exact;
            }
            if (value.time) {
              --value.time;
            } else {
              value.time = 0;
            }
          });
        }, 1000);
      },
      InitTabScroll () {
        let width = 0;
        for (let i = 0; i < this.hotSortSecond.length; i++) {
          if (this.$refs.tabitem[0].getBoundingClientRect().width) {
            width += this.$refs.tabitem[0].getBoundingClientRect().width;
          }
        }
        this.$refs.tabWrapper.style.width = width + 'px';
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.tab, {
              startX: 0,
              click: true,
              scrollX: true,
              scrollY: false,
              scrollbar: {
                fade: false,
                interactive: true
              },
              eventPassthrough: 'vertical',
              mouseWheel: true
            });
          } else {
            this.scroll.refresh();
          }
        });
      },
      goGroupBooking () {
        this.$router.push('/index/groupBooking');
        // this.$router.push('/index/limiterBargain');
        // this.$router.push('/index/crediteExchange');
      },
      promotionIndex () {
         this.$router.push({path: '/index/promotion', query: {id: this.mallPromotion.id}});
      },
      // 轮播图 指示点的current获取
      swiperChange (e) {
        this.current = e.mp.detail.current;
      },
      initData () {
        // let http = this.$store.state.http;
        this.error = this.post = null;
        this.loadingData = true;
        this.$httpWX.get({
          url: 'api/v1.index/index'
        }).then(response => {
          let {thumb, popular_list, mall_promotion, mall_promotion_goods, lists, top_list} = response;
          thumb.forEach(good => {
            this.$set(good, 'thumb', this.http + good.thumb);
          });
          this.thumb = thumb;
          this.goodsDatas = lists;
          this.topList = top_list;
          /* this.hotSearchs = response.data.popular_list;
          this.imgsGroup = response.data.thumb;
          this.mallPromotion = response.data.mall_promotion;
          this.mallPromotionGoods = response.data.mall_promotion_goods;
          this.goodsDatas = response.data.lists;
          this.topList = response.data.top_list;
          this.topList.forEach(good => {
            this.$set(good, 'thumb', http + good.thumb);
          });
          this.imgsGroup.forEach(imgs => {
            this.$set(imgs, 'thumb', http + imgs.thumb);
          });
          if (this.mallPromotion) {
            this.$set(this.mallPromotion, 'ads_image', http + this.mallPromotion.ads_image);
            this.showPrice = true;
          }
          if (!sessionStorage.getItem('time')) {
            sessionStorage.setItem('time', this.mallPromotion.end_time);
          }
          this.loadingData = false;
          this.post = response; */
        }, response => {
          this.loadingData = false;
          this.error = '数据加载失败！';
        });
      }
    },
    created () {
      let that = this;
      // that.$store.commit('alterShowBottomNav', 'true');
      that.initData();
      that.getRatio();
      /* this.timeData[0].time = sessionStorage.getItem('time'); */
      /* that.getTime();
      that.$nextTick(() => {
        that.InitTabScroll();
      }); */
    }
  };
</script>

<style lang="stylus">
  .scroll-view-x
    background-color: #fff; white-space: nowrap;
  .navigator_second
    width:160rpx;text-align:center; display:inline-block;
    i
      font-size 35px;
    p
      font-size 13px; color #525252;
  .navigator_icon
    width:60rpx; height:60rpx;
  .navigator_text
    display:block; width:100%; font-size:24rpx
  .slide
    height:30rpx; background:#fff; with:100%; padding:14rpx 0 5rpx 0
    .slide-bar
      width:100px;  margin:0 auto; height:5px; background:#eee; border-radius 5px;
      .slide-show
        height:100%;  background-color:#ee7b0f; border-radius 5px;
  aside
    position relative;
    .img
      height: 60px; width: 100%;
    .img-two
      position absolute; top -31%; right 6%; height: 85px;  width: 80px;
  #hot-pay {margin-top: 8px; background: #fff; padding: 0 13px;}
  #hot-pay header {display: flex;align-items: center;height: 53px;}
  #hot-pay header p{font-size: 18px;font-weight: bold}
  #hot-pay header p span{padding-left: 5px;display: inline;width: auto;font-size: 13px;color: #8B8B8B;font-weight: normal}
  #hot-pay header div {flex: 1;font-size: 0;display: flex;align-content: center;}
  #hot-pay header div span {display: inline-block;width: 23px ;height: 23px;font-size: 13px;text-align: center;color: #fff;line-height: 23px;background: #F54727;border-radius: 3px;}
  #hot-pay header div i{font-size: 4px;line-height: 23px;color: #d0d0d0}
  #hot-pay header div span:first-of-type{margin: 0 0 0 auto;}
  #hot-pay >ul {width: 100%; display: flex; align-items: center; overflow: hidden;}
</style>
<style lang="stylus">
  .wx-swiper-dots
    position:relative;left: unset!important;right: 0;
    .wx-swiper-dots-horizontal
      margin-bottom: -5rpx;
</style>
